<template>
    <div ref="cont" :style="{ width: width, height: height }"></div>
</template>

<script>
import * as echarts from "echarts/core";

import { CanvasRenderer } from "echarts/renderers";
import { Lines3DChart } from "echarts-gl/charts";
import { Geo3DComponent } from "echarts-gl/components";
import world from "./world.js";
import data from "../assets/echart/flights.json";

import base from "./base.vue";

const { info } = console;

let inited = false;
function tryInit(echarts) {
    if (!inited) {
        echarts.use([Geo3DComponent, Lines3DChart, CanvasRenderer]);
        //手动注册地图数据
        world(echarts);
        inited = true;
    }
}

function getAirportCoord(idx) {
    return [data.airports[idx][3], data.airports[idx][4]];
}
var routes = data.routes.map(function (airline) {
    return [getAirportCoord(airline[1]), getAirportCoord(airline[2])];
});

export default {
    mixins: [base],
    methods: {
        reChart(cb){
            setTimeout(()=>{
                this._reChart(cb);
            },0);
        },
        _reChart(cb) {
            //这一句必须在初始化之前调用
            tryInit(echarts);
            const myChart = this.chart || (this.chart = echarts.init(this.$refs["cont"]));
            myChart.setOption({
                geo3D: {
                    map: "world",
                    shading: "realistic",
                    silent: true,
                    environment: "#333",
                    realisticMaterial: {
                        roughness: 0.8,
                        metalness: 0,
                    },
                    postEffect: {
                        enable: true,
                    },
                    groundPlane: {
                        show: false,
                    },
                    light: {
                        main: {
                            intensity: 1,
                            alpha: 30,
                        },
                        ambient: {
                            intensity: 0,
                        },
                    },
                    viewControl: {
                        distance: 70,
                        alpha: 89,
                        panMouseButton: "left",
                        rotateMouseButton: "right",
                    },
                    itemStyle: {
                        color: "#000",
                    },
                    regionHeight: 0.5,
                },
                series: [
                    {
                        type: "lines3D",
                        coordinateSystem: "geo3D",
                        effect: {
                            show: true,
                            trailWidth: 1,
                            trailOpacity: 0.5,
                            trailLength: 0.2,
                            constantSpeed: 5,
                        },
                        blendMode: "lighter",
                        lineStyle: {
                            width: 0.2,
                            opacity: 0.05,
                        },
                        data: routes,
                    },
                ],
            });
            window.addEventListener("keydown", function () {
                myChart.dispatchAction({
                    type: "lines3DToggleEffect",
                    seriesIndex: 0,
                });
            });

            cb && cb();
        },
    },
};
</script>
